<template>
    <div class="content">
        <!-- 查询 -->
        <el-form :inline="true" :model="formInline" ref="formInlineRef" class="demo-form-inline">
            <el-form-item label="角色名" prop="rname">
                <el-input v-model="formInline.rname" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit('formInlineRef')">查询</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData.slice((query.current - 1) * query.size, query.current * query.size)"
            style="width: 100%" highlight-current-row :empty-text="emptyText">
            <el-table-column prop="uid" label="编号" align="center">
            </el-table-column>
            <el-table-column prop="uname" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="rname" label="角色" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="query.current" :page-sizes="[5, 10, 15, 20]" :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
        <el-dialog title="编辑" :visible.sync="dialog" width="30%">

            <el-form :model="form" ref="formRef" :rules="rules">

                <el-form-item label="用户名" prop="uname">
                    <el-input v-model="form.uname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色组" prop="rid">
                    <el-select v-model="form.rid" placeholder="请选择">
                        <el-option v-for="(v, i) in rol" :key="i" :label="v.rname" :value="v.rid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="info" @click="cancelForm()">取 消</el-button>
            <el-button type="primary" @click="submitForm('formRef')" :loading="loading">{{
                loading? '提交中 ...': '提 交'
            }}</el-button>

        </el-dialog>
    </div>
</template>

<script>
import { findAllRoles, findAll, updateRoles, deleteUser, SearchByRoleName } from '@/api/hp/api'
export default {


    created() {
        findAllRoles().then((res) => {

            this.rol = res.data


        })
        this.getList();
    },
    data() {
        return {
            rol: [],
            emptyText:'暂无数据',
            loading: false,
            dialog: false,
            formInline: {
                rname: '',
            },
            tableData: [
                // {
                //     uid: '222',
                //     uname: 'dasd',
                //     rname: '员工',
                //     rid: '3'
                // },
            ],
            form:
            {
                uid: '',
                uname: '',
                rname: '',
                rid: ''
            },
            rules: {
                uname: {
                    required: true, message: '请输入姓名'
                },
                rname: {
                    required: true, message: '请选择角色'
                }
            },
            query: {
                current: 1,
                size: 5,
            }
        }
    },
    methods: {

        getList() {
            findAll().then((res) => {
                
                if (res.code===1017) {
                    this.$router.push('/home/access')
                } else {
                    this.tableData = res.data;
                    this.total = this.tableData.length
                  
                }
            })
        },
        handleUpdate(index, row) {
            console.log(index, row);
            this.dialog = true;
            this.form = JSON.parse(JSON.stringify(row));

        },
        onSubmit() {
            console.log(this.formInline.rname);
            SearchByRoleName(this.formInline).then((res) => {
                // console.log();
                console.log(res);
                this.tableData = res.data

            })
        },
        submitForm() {
            this.loading = true;
            updateRoles(this.form).then((res) => {

                this.getList();
                this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success'
                });
                this.loading = false;
                this.dialog = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm("此操作将永久删除, 是否继续？", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "删除",
                type: "warning",
            }).then(() => {
                console.log(row);
                deleteUser(row).then((res) => {
                    console.log(res);

                    if (res.code == 1007) {
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'success'
                        });
                        this.getList();
                    }
                });
            })
        },
        resetForm() {
            this.$refs.formInlineRef.resetFields()
            this.getList()
        },
        handleSizeChange(val) {
            this.query.current = 1;
            this.query.size = val
            console.log(this.query);
            this.getList();
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.query.current = val;
            this.getList();
            // console.log(`当前页: ${val}`);
        },

        cancelForm() {
            this.dialog = false;
            this.$refs.formRef.resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    margin: 0 20px;
}

.el-form {
    margin: 20px 20px;
    border-bottom: 3px #fff solid;
}

.add {
    margin-left: 20px;
    margin-bottom: 20px;
}
</style>